<template>
	<div class="wrap1">
		<span class="dingwei">(按字母排序)</span>
		<ul class="nav1">
			<li v-for="item in group" :key="item.asasas">
				<h4 class="zimu">{{item.asasas}}</h4>
					<ul class="nav2">
						<router-link v-for="items in item" :key="items.code" :to="{path:'/indexcity', query:{name:items.name, id:items.id}}">
							<li>{{items.name}}</li>
						</router-link>
					</ul>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				group: [],
			}
		},
		created() {
			let obj = this;
			this.$axios({
				url: "https://elm.cangdu.org/v1/cities?type=group",
				method: "get",
			}).then(function(res) {
				for (let i = 65; i < 91; i++) {
					let code = String.fromCharCode(i);
					if (res.data[code]) {
						res.data[code].asasas = code;
						obj.group.push(res.data[code]);
					}
				}
			})
		}
	}
</script>

<style scoped>
	.dingwei {
		position: relative;
		left: 30px;
		top: 11px;
		font-size: 10px;
		color: #999;
	}
	.zimu {
		margin-top: -10px;
		font-size: 12px;
		height: 29px;
		line-height: 29px;
		clear: both;
		border: .025rem solid #e4e4e4;
		padding-left: 10px;
		color: #666;
		font-weight: 300;
	}

	.nav1 {
		width: 100%;
		list-style: none;
		box-sizing: border-box;
		background: #FFFFFF;
		padding-left: 0;
	}

	.nav2 {
		list-style: none;
		box-sizing: border-box;
	}

	.nav2 li {
		width: 25%;
		box-sizing: border-box;
		float: left;
		font-size: 12px;
		color: #666;
		text-align: center;
		line-height: 41px;
		border: .025rem solid #e4e4e4;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
